<template>
  <div>
    <MyHead></MyHead>
    <form action="/">
      <van-search
        v-model="kw"
        show-action
        background="#000"
        shape="round"
        placeholder="搜索你想听的歌曲"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <!-- 全写 -->
    <!-- <ul class="search-view" v-for="(l, i) in list" :key="i">
      <li class="search-box">
        类型：{{ l.name }}
        <div v-for="(a, b) in l.itemlist" :key="b" class="search-list">
          <p>{{ l.name }}名称：{{ a.name }}</p>
          <p>{{ l.name }}信息：{{ a.singer }}</p>
          <img
            :src="
              a.pic
                ? a.pic
                : 'https://static2-qianqian.91q.com/client/img/31b35b2.jpg'
            "
            alt=""
          />
        </div>
      </li>
    </ul> -->
    <div class="hot-box" v-if="flag">
      <p class="hot-title">懂你现在 ~ 听你所爱 ~ 猜你所想 ~</p>
      <div class="hot-list">
        <span v-for="(l, i) in hot" :key="i" class="hot-name">
          {{ l.name }}
        </span>
      </div>
    </div>
    <div class="tj-flag" v-else>
      <!-- 分写 -->
      <div
        class="search-all"
        v-if="
          list0.count > 0 &&
          list1.count > 0 &&
          list2.count > 0 &&
          list3.count > 0
        "
      >
        <!-- 1. 专辑 -->
        <ul class="search-view" v-if="list0.count > 0">
          <li class="search-box">
            类型：{{ list0.name }}相关
            <div v-for="(l, i) in list0.itemlist" :key="i" class="search-list">
              <p>{{ list0.name }}名称：{{ l.name }}</p>
              <p>{{ list0.name }}信息：{{ l.singer }}</p>
              <img
                :src="
                  l.pic
                    ? l.pic
                    : 'https://static2-qianqian.91q.com/client/img/31b35b2.jpg'
                "
                alt=""
              />
            </div>
          </li>
        </ul>
        <!-- 2. MV -->
        <ul class="search-view" v-if="list1.count > 0">
          <li class="search-box">
            类型：{{ list1.name }}相关
            <div v-for="(l, i) in list1.itemlist" :key="i" class="search-list">
              <p>{{ list1.name }}名称：{{ l.name }}</p>
              <p>{{ list1.name }}信息：{{ l.singer }}</p>
              <img
                :src="
                  l.pic
                    ? l.pic
                    : 'https://static2-qianqian.91q.com/client/img/31b35b2.jpg'
                "
                alt=""
              />
            </div>
          </li>
        </ul>
        <!-- 3. 歌手 -->
        <ul class="search-view" v-if="list2.count > 0">
          <li class="search-box">
            类型：{{ list2.name }}相关
            <div v-for="(l, i) in list2.itemlist" :key="i" class="search-list">
              <p>{{ list2.name }}名称：{{ l.name }}</p>
              <p>{{ list2.name }}信息：{{ l.singer }}</p>
              <img
                :src="
                  l.pic
                    ? l.pic
                    : 'https://static2-qianqian.91q.com/client/img/31b35b2.jpg'
                "
                alt=""
              />
            </div>
          </li>
        </ul>
        <!-- 4. 单曲 -->
        <ul class="search-view" v-if="list3.count > 0">
          <li class="search-box">
            类型：{{ list3.name }}相关
            <div v-for="(l, i) in list3.itemlist" :key="i" class="search-list">
              <p>{{ list3.name }}名称：{{ l.name }}</p>
              <p>{{ list3.name }}信息：{{ l.singer }}</p>
              <img
                :src="
                  l.pic
                    ? l.pic
                    : 'https://static2-qianqian.91q.com/client/img/31b35b2.jpg'
                "
                alt=""
              />
            </div>
          </li>
        </ul>
      </div>
      <!-- 如果上面的数据都查不到 提示信息 -->
      <div class="empty" v-else>
        <van-empty
          class="custom-image"
          image="https://assets.maizuo.com/h5/v5/public/app/img/rectangle@2x.2bdf0374.png"
          description="暂无相关歌曲信息"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { getSearch } from "./service";
import MyHead from "../../components/MyHead.vue";
export default {
  components: {
    MyHead,
  },
  data() {
    return {
      flag: true,
      kw: "",
      list: [],
      list0: [],
      list1: [],
      list2: [],
      list3: [],
      hot: [
        { name: "周杰伦" },
        { name: "陈奕迅" },
        { name: "薛之谦" },
        { name: "许嵩" },
        { name: "卢婷" },
        { name: "冉敏" },
        { name: "成倩" },
        { name: "舒文静" },
        { name: "文绍康" },
        { name: "刘晓青" },
        { name: "卢子炜" },
        { name: "李亚玲" },
        { name: "吴晓松" },
        { name: "梁诗琴" },
      ],
    };
  },
  methods: {
    async onSearch(kw) {
      this.flag = false;
      console.log(kw);
      const { code, data } = (await getSearch(kw)) || {};
      if (code) return false;
      this.list = data;
      this.list0 = data.album;
      this.list1 = data.mv;
      this.list2 = data.singer;
      this.list3 = data.song;
    },
    // 取消搜索
    onCancel() {
      this.kw = "";
      this.flag = true;
      this.list = [];
    },
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
@import "styles/index.less";
/deep/ .van-search {
  .margin-top(82);
}
/deep/ .van-search__content {
  background: #303133;
}
/deep/ .van-search__action {
  color: hsla(0, 0%, 100%, 0.6);
}

/deep/ .van-field__control {
  color: hsla(0, 0%, 100%, 0.6);
}

.search-box {
  background: #000;
}
.search-view {
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.6);
  .padding(10,10,10,10);
  font-size: 18px;
  .w(375);
  .search-box {
    display: flex;
    flex-direction: column;
    // .w(375);
    background: #000;
    color: white;
    .search-list {
      font-size: 16px;
      color: hsla(0, 0%, 100%, 0.6);
      .margin(3,0,3,0);
      display: flex;
      // align-items: flex-start;
      justify-content: space-between;
      p {
        .w(120);
        .padding-top(15);
      }
      img {
        .w(60);
        .h(60);
        border-radius: 50%;
      }
    }
  }
}
// 推荐
.hot-box {
  .padding(0,15,8,0);
  .margin-left(20);
  position: relative;
  .hot-title {
    font-size: 16px;
    line-height: 16px;
    color: white;
    .margin(18,0,18,0);
  }
  .hot-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-line-pack: center;
    align-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    .hot-name {
      .h(30);
      background-color: hsla(0, 0%, 95.7%, 0.6);
      line-height: 14px;
      .border-radius(3);
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-size: 13px;
      .padding(8,12,8,12);
      .margin(5,3,5,3);
    }
  }
}
</style>
